<template>
  <div class="page-body">
    <el-form size="small" :inline="true" ref="form" :model="myForm">
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name1" placeholder="请输入商户名称" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name2" placeholder="请输入法人名称" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name3" placeholder="请输入联系电话" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="small" clearable v-model="myForm.status1" placeholder="请选择启用状态">
          <el-option v-for="item in status1DataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select size="small" clearable v-model="myForm.status2" placeholder="请选择是否为供应商">
          <el-option v-for="(item, index) in status2DataList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
        <el-button size="small" class="width_104" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button size="mini" type="success" icon="el-icon-document-add" @click="addDetail()">新建商户</el-button>
    </div>
    <!-- 商户列表 -->
    <el-table class="margin_top_20" ref="multipleTableContent" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="mchName" label="商户名称"></el-table-column>
      <el-table-column prop="mchNo" label="商户编码"></el-table-column>
      <el-table-column prop="contactPhone" label="商户电话"></el-table-column>
      <el-table-column prop="ledgerName" label="法人代表"></el-table-column>
      <el-table-column prop="equipmentCount" label="设备数"></el-table-column>
      <el-table-column prop="creatorName" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="enableStatus" label="是否启用">
        <template slot-scope="scope">
          <el-switch :value="scope.row.enableStatus == 0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <button class="my-btn my-btn--mini my-btn--primary plain" @click="showDetail(scope.row.id)">查看</button>
          <button class="my-btn my-btn--mini my-btn--primary plain" @click="editDetail(scope.row.id)">编辑</button>
          <!-- <button class="my-btn my-btn--mini my-btn--danger plain" @click="handleDeletes(scope.row)">删除</button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center">
      <br>
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
        :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Setting from '@/settings';
import { GetMerchantListPaging } from '@/views/merchant-management/services';
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      pageData: [],
      pageCount: 0,
      myForm: {
        name1: '',
        name2: '',
        name3: '',
        status1: '',
        status2: ''
      },
      status1DataList: [
        { value: '0', label: '启用' },
        { value: '1', label: '停用' },
      ],
      status2DataList: [
        { value: '0', label: '否' },
        { value: '1', label: '是' },
      ],
    }
  },
  activated() {
    this.getPageDataList();
  },
  created() {
    this.getPageDataList();
  },
  methods: {
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    },
    getPageDataList() {
      this.loading = true;
      GetMerchantListPaging({
        mchName: this.myForm.name1,
        ledgerName: this.myForm.name2, // 法人名称
        contactPhone: this.myForm.name3, // 联系电话
        enableStatus: this.myForm.status1, // 启用状态：0启用，1禁用
        isSupplier: this.myForm.status2, // 是否为供应商：0否，1是
        pageNum: this.pageIndex,	
        pageSize: this.pageSize	
      })
      .finally(() => this.loading = false)
      .then(res => {
        if (res && res.code == 200) {
          this.pageData = res.data.list;
          this.pageCount = res.data.total;

          if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
            this.pageIndex = 1;
            this.getPageDataList();
          }
        }
      })
    },
    reset() {
      this.pageIndex = 1;
      this.myForm.name1 = '';
      this.myForm.name2 = '';
      this.myForm.name3 = '';
      this.myForm.status1 = '';
      this.myForm.status2 = '';
      this.getPageDataList();
    },
    addDetail() {
      this.$router.push({
        name: 'MerchantAdd',
      })
    },
    editDetail(rowId) {
      //编辑商品接口
      this.$router.push({
        name: 'MerchantEdit',
        query: { id: rowId }
      })
    },
    showDetail(rowId) {
      //查看详情
      this.$router.push({
        name: 'MerchantDetail',
        query: { id: rowId },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
</style> 
